<template>
  <view class="body">
    <view class="wrap">
      <view class="title_info">
        <image class="img_bg" src="https://ainengli.hzjrsw.com/jkhx/reportBg.png" />
        <view class="title">{{ reportInfo.name }}</view>
        <view class="date">报告时间： {{ reportInfo.date }}</view>
      </view>
      <view v-if="type == 'inspect'" class="content">
        <view class="top">
          <view class="left">项目名称</view>
          <view class="right">结果</view>
        </view>
        <view class="list">
          <view v-for="(item, index) in reportDetail" :key="index" class="item">
            <view class="left">
              <view class="title">{{ item.testName }}</view>
              <view class="range">参考范围： {{ item.reference }}</view>
            </view>
            <view class="right">
              <view :class="['result', item.normal == 'n' ? '' : 'red']">
                {{ item.testResult }}
                <image
                  v-if="item.normal == 'h'"
                  class="img_arrow"
                  src="@/static/image/raozg/error_high.png"
                />
                <image
                  v-if="item.normal == 'l'"
                  class="img_arrow"
                  src="@/static/image/raozg/error_low.png"
                />
              </view>
              <view class="unit">单位： {{ item.unit }}</view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="type == 'check'" class="check_content">
        <view class="check_title">检查所见</view>
        <view class="check_content">
          <text class="check_text">{{ reportDetail.forward }}</text>
        </view>
      </view>
      <view v-if="type == 'check'" class="check_content">
        <view class="check_title">检查结论</view>
        <view class="check_content">
          <text class="check_text red">{{ reportDetail.result }}</text>
        </view>
      </view>
      <view v-if="outType" class="start_img">
        <view class="title">原始图片</view>
        <image
          v-if="type == 'inspect'"
          mode="widthFix"
          class="img_report"
          src="https://ainengli.hzjrsw.com/jkhx/inspectPic.png"
        />
        <image
          v-if="type == 'check'"
          mode="widthFix"
          class="img_report"
          src="https://ainengli.hzjrsw.com/jkhx/checkPic.png"
        />
      </view>
    </view>
    <view class="fixed">
      <button class="fixed_btn" @tap="toResult">报告解读</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import store from '@/store'

const type = ref('')
const outType = ref('')
const reportInfo = reactive({
  name: '',
  date: ''
})
const reportDetail = ref({})

onLoad((option) => {
  type.value = option.type ? option.type : ''
  // outType.value = option.outType === 'undefined' ? false : true
  reportInfo.name = option.name ? option.name : ''
  reportInfo.date = option.date ? option.date : ''
  reportDetail.value = store.state.REPORTINFO
})

const toResult = () => {
  uni.navigateTo({
    url:
      '/packA/pages/report/result?type=' +
      type.value +
      '&name=' +
      reportInfo.name +
      '&date=' +
      reportInfo.date
  })
}
</script>

<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100vh;
  position: relative;
  background: #F3F7F8;
  overflow: hidden;
  padding: 32rpx;
  box-sizing: border-box;
  .wrap {
    height: 100vh;
    overflow: auto;
    padding-bottom: calc(172rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(172rpx + env(safe-area-inset-bottom));
    box-sizing: border-box;
  }
  .title_info {
    width: 100%;
    height: 170rpx;
    overflow: hidden;
    position: relative;
    .img_bg {
      width: 686rpx;
      height: 170rpx;
      position: absolute;
    }
    .title {
      font-weight: 500;
      font-size: 36rpx;
      color: #ffffff;
      margin-top: 32rpx;
      margin-left: 32rpx;
      position: relative;
      z-index: 10;
    }
    .date {
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
      margin-top: 20rpx;
      margin-left: 32rpx;
      position: relative;
      z-index: 10;
    }
  }
  .content {
    margin-top: 24rpx;
    background: #ffffff;
    border-radius: 12rpx;
    padding: 24rpx;
    .list {
      max-height: calc(100vh - 512rpx);
      overflow: auto;
    }
    .item {
      border-bottom: 1rpx solid #e5e6eb;
      padding: 24rpx 0;
      display: flex;
      justify-content: space-between;
      .title,
      .result {
        font-weight: 400;
        font-size: 30rpx;
        color: #222222;
      }
      .result {
        text-align: right;
        .img_arrow {
          width: 24rpx;
          height: 24rpx;
        }
      }
      .red {
        color: #ff503d;
      }
      .unit,
      .range {
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        margin-top: 16rpx;
      }
      .unit {
        margin-top: 24rpx;
      }
    }
    .top {
      border-bottom: 1rpx solid #e5e6eb;
      padding-bottom: 24rpx;
      display: flex;
      justify-content: space-between;
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
    }
  }
  .check_content {
    background: #fff;
    border-radius: 12rpx;
    padding: 32rpx;
    margin-top: 24rpx;
    .check_title {
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
      margin-bottom: 24rpx;
    }
    .check_content {
      background: #fafafa;
      border-radius: 8rpx;
      padding: 24rpx;
      .check_text {
        display: inline-block;
        font-weight: 400;
        font-size: 30rpx;
        color: #222222;
        line-height: 48rpx;
        text-align: justify;
      }
      .red {
        color: #ff503d;
      }
    }
  }
  .start_img {
    .title {
      font-weight: 500;
      font-size: 32rpx;
      color: #222222;
      margin: 32rpx 0 24rpx;
    }
    .img_report {
      width: 100%;
    }
  }
  .fixed {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 10;
    padding: 24rpx 32rpx;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    box-sizing: border-box;
    background: #ffffff;
    .fixed_btn {
      width: 100%;
      background: #00d1b6;
      border-radius: 44rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
    }
  }
}
</style>
